<template>
  <div class="app-container">
    <el-card shadow="never" class="mb20">
      <div slot="header">我的工作(流程)</div>
      <el-row :gutter="16" class="flex" style="justify-items: stretch;">
        <el-col :span="12">
          <el-card shadow="never" class="mb20">
            <div slot="header">我的任务</div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="我的发起" name="first">
                <template slot="label">
                  <el-badge :value="total.StartProcess" class="task-badge">我的发起</el-badge>
                </template>
                <StartProcess ref="StartProcess" :height="200" />
              </el-tab-pane>
              <el-tab-pane label="我的待办" name="second">
                <template slot="label">
                  <el-badge :value="total.PersonalTask" class="task-badge">我的待办</el-badge>
                </template>
                <PersonalTask ref="PersonalTask" :height="200" />
              </el-tab-pane>
              <el-tab-pane label="我的参与" name="third">
                <template slot="label">
                  <el-badge :value="total.PartakeTask" class="task-badge">我的参与</el-badge>
                </template>
                <PartakeTask ref="PartakeTask" :height="200" />
              </el-tab-pane>
              <el-tab-pane label="转发通知" name="fourth">
                <template slot="label">
                  <el-badge :value="total.NotifyProcess" class="task-badge">转发通知</el-badge>
                </template>
                <NotifyProcess ref="NotifyProcess" :height="200" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="mb20">
            <div slot="header">流程公示</div>
            <ProcessPublicity ref="ProcessPublicity" />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="16" class="flex mb20" style="justify-items: stretch;">
      <el-col :span="12">
        <el-card shadow="never" style="height: 100%">
          <div slot="header">预警</div>
          <el-tabs v-model="prewarningName" @tab-click="handlePrewarningClick">
            <el-tab-pane label="待办" name="preOne"></el-tab-pane>
            <el-tab-pane label="已办" name="preTwo"></el-tab-pane>
          </el-tabs>
          <e-table
            ref="eTable"
            :tableData="preData"
            :columns="preCol"
            :loading="preLoading"
            :pageObj="null"
            :border="null"
            @row-click="handlePreRowClick"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <div slot="header">我的考评</div>
          <el-tabs v-model="evalName" @tab-click="handleEvalClick">
            <el-tab-pane label="综合考评" name="evalOne"></el-tab-pane>
            <el-tab-pane label="医德医风" name="evalTwo"></el-tab-pane>
            <el-tab-pane label="内部满意度" name="evalThree"></el-tab-pane>
          </el-tabs>
          <e-table
            ref="eTable"
            :tableData="evalData"
            :columns="evalCol"
            :loading="evalLoading"
            :pageObj="null"
            :border="null"
          >
            <el-table-column label="标题" slot="title" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleBtnClick(scope.row)">{{ scope.row.taskTitle }}</el-button>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="flex mb20" style="justify-items: stretch;overflow-y: scroll">
      <el-col class="width-col" :span="8" v-for="(item,index) in hotArticle" :key="index">
        <el-card shadow="never" style="height: 100%">
          <div slot="header">
            {{ item.categoryName }}
            <el-button
              class="fr"
              size="small"
              type="text"
              style="margin-top: -5px"
              @click="$router.push({ path: '/system/cms-article' })"
            >更多</el-button>
          </div>
          <ul style="max-height: 480px">
            <li v-for="(ite,ind) in item.list" :key="ind" class="mb20" @click="handleDetail(ite)">
              <img v-if="ite.savePath" class="flex-image" :src="ite.savePath" alt="示例" />
              <div class="content-span">
                <h2>
                  <i v-if="ite.upFlag" :class="[ ite.upFlag ? 'el-icon-zhiding' : '', 'mr10' ]"></i>
                  <i
                    :class="[ ite.articleFlag === 1 ? 'el-icon-toutiao' : ( ite.articleFlag === 2 ? 'el-icon-remen' : ( ite.articleFlag === 3 ? 'el-icon-s-flag' : '' ))]"
                  ></i>
                  {{ ite.articleName }}
                </h2>
                <p class="mb10">{{ ite.contentBrief }}</p>
                <span>{{ ite.issuer }} {{ formatTime(ite.editorTime) }}</span>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import StartProcess from '@/views/workflow/bpmn/task/components/StartProcess'
import PersonalTask from '@/views/workflow/bpmn/task/components/PersonalTask'
import PartakeTask from '@/views/workflow/bpmn/task/components/PartakeTask'
import NotifyProcess from '@/views/workflow/bpmn/task/components/NotifyProcess'
import ProcessPublicity from '@/views/workflow/bpmn/task/components/ProcessPublicity'
import { getCmsList } from '@/api/system'
import { queryTodoCount } from '@/api/workflow/bpmn/runtime'
import { getWarningHaveDone, getWarningBacklog, getEvaluationList, getDeclareTotal, getInternalList, getMoralityBackLog, getMoralityTotal } from '@/api/monitor'

export default {
  components: {
    StartProcess,
    PersonalTask,
    PartakeTask,
    NotifyProcess,
    ProcessPublicity
  },
  data() {
    return {
      total: {
        // 我的任务各项汇总数
        StartProcess: 0,
        PersonalTask: 0,
        PartakeTask: 0,
        NotifyProcess: 0
      },
      activeName: 'second',
      prewarningName: 'preOne',
      preData: [],
      preCol: [
        {
          label: '名称',
          prop: 'ruleName'
        },
        {
          label: '数量',
          prop: 'total'
        }
      ],
      preLoading: false,
      evalName: 'evalOne',
      evalData: [],
      evalCol: [
        { slot: 'title' },
        {
          label: '时间',
          prop: 'createTime'
          // formattter(row, column, cellValue, index) {
          //   return this.formatTime(cellValue)
          // }
        }
      ],
      hotArticle: [],
      evalLoading: false
    }
  },
  async created() {
    const PersonalTask = this.$route.params.PersonalTask
    if (PersonalTask === true) {
      this.activeName = 'second'
    }
    this.queryTodoCount()

    const res = await getCmsList()
    console.log('getCmsList', res)

    let arr = []
    if (res.state === '000000' && res.data.length > 0) {
      arr = res.data.filter(v => v.list && v.list.length > 0)
      arr.map(v => {
        if (v.list.length > 5) {
          v.list = v.list.splice(0, 5)
        }
      })
      this.hotArticle = [...arr]
    }

    this.$nextTick(() => {
      this.handleFilter()
    })
  },
  mounted() {
    this.getSupplier()
    this.getWarningBacklog()
  },
  methods: {
    queryTodoCount() {
      queryTodoCount().then(res => {
        this.total = {
          // 我的任务各项汇总数
          StartProcess: res.data.startCount,
          PersonalTask: res.data.todoCount,
          PartakeTask: res.data.partakeCount,
          NotifyProcess: res.data.notifyCount
        }
      })
    },
    handleDetail(item) {
      this.$router.push({
        path: '/desktop/article-detail',
        query: { item: JSON.stringify(item) }
      })
    },
    handleBtnClick(row) {
      console.log('row', row)
      if (this.evalName === 'evalOne') {
        let name = null
        if (row.to) {
          if (row.to === 'userTotal') {
            name = 'evaluateVerify'
          } else {
            name = 'evaluateVerify2'
          }
        } else {
          name = 'evaluateMyPlan'
        }

        this.$router.push({
          name
        })
      } else if (this.evalName === 'evalTwo') {
        let name = null
        if (row.to) {
          if (row.to === 'deptTotal') {
            name = 'medicalOffice'
          } else if (row.to === 'partyTotal') {
            name = 'medicalBranch'
          } else {
            name = 'medicalCommittee'
          }
        } else {
          name = 'medicalPerson'
        }
        this.$router.push({
          name
        })
      } else {
        this.$router.push({
          name: 'satisfactionTask'
        })
      }
    },
    handlePreRowClick(row, column, event) {
      let type = this.prewarningName === 'preOne' ? 'not' : 'have'
      this.$router.push({
        name: 'prewarningHandle',
        params: { row: { ...row, type } }
      })
    },
    getWarningHaveDone() {
      getWarningHaveDone().then(res => {
        console.log('getWarningHaveDone', res)
        this.preData = res.data.records
      })
    },
    getWarningBacklog() {
      getWarningBacklog().then(res => {
        console.log('getWarningBacklog', res)
        this.preData = res.data
      })
    },
    handlePrewarningClick() {
      if (this.prewarningName === 'preOne') {
        this.getWarningBacklog()
      } else {
        this.getWarningHaveDone()
      }
    },
    async getSupplier() {
      let obj = null
      const res = await getDeclareTotal()
      obj = res.data
      console.log('getSupplier obj', obj)

      getEvaluationList().then(res => {
        console.log('getEvaluationList res', res)
        let arr = res.data
        if (arr.length > 0) {
          for (const key in obj) {
            if (obj[key] !== 0) {
              arr.push({ taskTitle: obj[key], to: key })
            }
          }
          console.log('arr', arr)
          let arr1 = arr.filter(v => v !== null)

          this.evalData = [...arr1]
        } else {
          this.evalData = []
        }
      })
    },
    async handleEvalClick() {
      if (this.evalName === 'evalOne') {
        this.getSupplier()
      } else if (this.evalName === 'evalTwo') {
        const res = await getMoralityTotal()
        let obj = res.data

        getMoralityBackLog().then(res => {
          console.log('医德医风待办', res)
          let arr = res.data
          if (arr.length > 0) {
            for (const key in obj) {
              if (obj[key] !== 0) {
                arr.push({ taskTitle: obj[key], to: key })
              }
            }
            console.log('arr', arr)
            let arr1 = arr.filter(v => v !== null)
            this.evalData = [...arr1]
          } else {
            this.evalData = []
          }
        })
      } else {
        getInternalList().then(res => {
          console.log('内部满意度待办', res)
          let arr1 = res.data.filter(v => v !== null)
          this.evalData = [...arr1]
        })
      }
    },
    handleFilter() {
      if (this.activeName == 'first') {
        this.$refs.StartProcess.getList()
      } else if (this.activeName == 'second') {
        this.$refs.PersonalTask.getList()
      } else if (this.activeName == 'third') {
        this.$refs.PartakeTask.getList()
      } else if (this.activeName == 'fourth') {
        this.$refs.NotifyProcess.getList()
      } else if (this.activeName == 'fifth') {
        // this.$refs.ProcessPublicity.getList()
      }
    },
    handleClick(tab, event) {
      this.handleFilter()
    }
  }
}
</script>

<style scoped>
li.mb20 {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  padding: 8px;
}
li.mb20:hover {
  color: #1890ff;
  cursor: pointer;
}
.content-span {
  flex: 1;
  max-height: 103px;
  overflow: hidden;
}

.flex-image {
  width: 60px;
  flex: 0 0 auto;
}

.width-col {
  min-width: 350px;
}

h2 i {
  font-size: 20px;
  color: red;
}
.task-badge >>> .el-badge__content {
  top: 7px;
}
</style>
